<template>
  <view class="modal-overlay" v-if="showModal" @click="closeModal">
    <view class="modal" @click.stop>
      <view class="modal-header">
        <text class="modal-title">创耐锂电 · 使用说明</text>
      </view>
      
      <view class="modal-body">
        <view class="step">
          <view class="step-icon">1</view>
          <view class="step-content">
            <view class="step-title">查看电池铭牌</view>
            <text class="step-desc">找到电池上的铭牌，查看“蓝牙名称”，例如：<text class="text-bold"> V2-E30147</text></text>
          </view>
        </view>
        
        <view class="step">
          <view class="step-icon">2</view>
          <view class="step-content">
            <view class="step-title">选择对应版本</view>
            <text class="step-desc">在下方列表中选择与您的电池匹配的版本，如：<text class="text-bold">V1.0、V2.0、MT-V3.0</text> 等</text>
          </view>
        </view>
        
        <view class="step">
          <view class="step-icon">3</view>
          <view class="step-content">
            <view class="step-title">连接设备</view>
            <text class="step-desc">进入后，在设备列表中选择与铭牌上一致的蓝牙名称，即可完成连接。</text>
          </view>
        </view>
      </view>
      
      <view class="modal-footer">
        <button class="primary-btn" @click="closeModal">我知道了</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'UsageGuideModal',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    showModal() {
      return this.show;
    }
  },
  methods: {
    closeModal() {
      // 通过 emit 通知父组件关闭弹窗
      this.$emit('update:show', false);
      this.$emit('closed');
    }
  }
}
</script>

<style lang="scss">
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  .modal {
    width: 90%;
    max-width: 88%;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);

    .modal-header {
      background: linear-gradient(135deg, #007AFF, #0056B3);
      padding: 40rpx 30rpx;
      text-align: center;

      .modal-title {
        color: #fff;
        font-size: 36rpx;
        font-weight: bold;
      }
    }

    .modal-body {
      padding: 40rpx 30rpx;

      .step {
        display: flex;
        align-items: flex-start;
        margin-bottom: 40rpx;

        .step-icon {
          width: 50rpx;
          height: 50rpx;
          background: #007AFF;
          color: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          font-weight: bold;
          margin-right: 20rpx;
          flex-shrink: 0;
          margin-top: 6rpx;
        }

        .step-content {
          flex: 1;

          .step-title {
            font-size: 30rpx;
            color: #333;
            font-weight: 500;
            margin-bottom: 8rpx;
          }

          .step-desc {
            font-size: 28rpx;
            color: #666;
            line-height: 1.5;
          }
        }
      }
    }

    .modal-footer {
      padding: 0 30rpx 50rpx;

      .primary-btn {
        width: 100%;
        height: 88rpx;
        background: linear-gradient(135deg, #007AFF, #0056B3);
        color: #fff;
        border: none;
        border-radius: 44rpx;
        font-size: 32rpx;
        font-weight: 500;
        line-height: 88rpx;
        box-sizing: border-box;
        padding: 0;
        margin: 0;

        &:active {
          transform: scale(0.96);
          background: linear-gradient(135deg, #0066CC, #004080);
        }
      }
    }
  }
}
</style>



